<template>
  <div class="body">
    <router-link to="/backend/userinfo/personalinfo">
      <el-button type="primary" plain>完善信息</el-button>
    </router-link>
    <router-link to="/backend/userinfo/editavatar">
      <el-button type="success" plain>修改头像</el-button>
    </router-link>
    <el-button @click="toEditPassword"
               type="warning" plain>修改密码
    </el-button>
    <el-dialog
        title="修改密码"
        :visible.sync="passwordDialog"
        :before-close="handleClose"
        width="30%">
      <el-input
          placeholder="请输入密码"
          v-model="obj.password"
          clearable>
      </el-input>
      <el-input
          placeholder="请输入新密码"
          v-model="obj.newPassword1"
          clearable>
      </el-input>
      <el-input
          placeholder="请再次输入新密码"
          v-model="obj.newPassword2"
          clearable>
      </el-input>
      <span slot="footer" class="dialog-footer">
          <el-button @click="passwordDialog = false">取 消</el-button>
          <el-button type="primary" @click="editpassword">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {mapActions} from 'vuex'
import cookie from "js-cookie";

export default {
  name: "Body",
  data() {
    return {
      passwordDialog: false,  // 修改密码对话框
      obj: {
        password: '',   // 旧的密码
        newPassword1: '', // 第一次输入的新密码
        newPassword2: '', // 第二次输入的新密码
      }
    }
  },
  methods: {
    ...mapActions('Backend', ['editPassword']),
    // 弹出框关闭按钮
    handleClose() {
      this.password = ''
      this.newPassword1 = ''
      this.newPassword2 = ''
      this.passwordDialog = false
    },
    // 确定修改密码
    editpassword() {
      let obj = this.obj
      obj['nid'] = this.$store.state.userinfo.nid
      this.editPassword(this.obj).then(value => {
        if (value['code'] === 200) {
          this.$message({
            message: value['info'],
            type: "success"
          })
          setTimeout(() => {
            cookie.remove('userinfo')
            this.$store.commit('cleadUserInfo')
            this.$router.push({
              name: 'home'
            })
          }, 50)
        } else {
          this.$message({
            message: value['info'],
            type: "error"
          })
        }
      })
    },
    // 修改密码显示框
    toEditPassword() {
      this.passwordDialog = true
      this.$router.push({
        name: 'UserInfo'
      })
    }
  }
}
</script>

<style scoped lang="less">
.body {
  height: 70px;
  width: calc(100% - 40px);
  background-color: white;
  margin: 20px 0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-around;

  // 修改密码输入框
  .el-dialog:nth-child(1) {
    .el-dialog__body {
      .el-input {
        margin-bottom: 20px;
      }
    }
  }
}
</style>